<template>
  <el-form v-if="setting" :model="setting" label-position="top">
    <el-form-item label="背景颜色">
      <el-select v-model="setting.config.color">
        <el-option
          v-for="item in configData2.colorList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="图标">
      <div class="el-input el-input--default">
        <div class="el-input__wrapper">
          <input
            v-model.lazy="setting.config.iconName"
            class="el-input__inner"
          />
        </div>
      </div>
    </el-form-item>
    <el-form-item label="图标颜色">
      <el-color-picker v-model="setting.config.iconColor" />
    </el-form-item>
    <el-form-item label="数据集">
      <el-select v-model="setting.config.datasetId" @change="datasetChange">
        <el-option
          v-for="item in configData.datasetIdList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option
      ></el-select>
    </el-form-item>
    <el-form-item label="绑定字段">
      <el-select v-model="setting.config.dataset.name" @change="columnChange">
        <el-option
          v-for="item in column"
          :key="item.prop"
          :label="item.label"
          :value="item.prop"
        >
        </el-option
      ></el-select>
    </el-form-item>
  </el-form>
</template>
  <script setup>
import { ref, defineModel, onMounted } from "vue";
import Api from "@/api/model/system";
const props = defineProps({
configData: { type: Object, default: {} },
fileName: { type: String, default: "" },
});
const setting = defineModel();
const column = ref([])
const configData2 = ref({
  colorList: [
    { value: "orange", label: "橙色" },
    { value: "blue", label: "蓝色" },
    { value: "purple", label: "紫色" },
    { value: "green", label: "绿色" },
  ],
});
onMounted(() => {
  getInit();
});
const getInit = async () => {
  let params = {
    fileName: props.fileName,
    datasetId: setting.value.config.datasetId
  };
  let res = await Api.report.selectCompanyList.post(params);
  console.log(res)
  if (res.code == 200) {
    column.value = res.bean.table.columns; //表格列
  }
};
const datasetChange = ()=>{
  setting.value.config.dataset = {prop:'',label:''}
  getInit()
}
const columnChange = (val)=>{
  setting.value.config.dataset.label = column.value.find((ele)=>{return ele.prop === val}).label
}
</script>